<template>
    <div class="shop-right">
        <div class="shop-preview">
            <div class="tip-line">
                <cell-tip
                    tip="每次修改底部导航后，需要提交小程序审核通过后即可生效"
                />
            </div>

            <div class="preview-head">
                <div class="preview-head__text">首页</div>
            </div>
            <!-- 放置首页样式 -->
            <div class="preview-body"></div>
            <div class="preview-foot flexs">
                <div
                    :class="[{ 'nav-active': cur === index }, 'nav-item']"
                    v-for="(item, index) in navs"
                    :key="index"
                >
                    <el-image
                        :src="
                            cur === index
                                ? item.selectedIconPath
                                : item.iconPath
                        "
                        fit="cover"
                        v-if="item.iconPath"
                    />
                    <p
                        class="nav-text"
                        :style="{
                            color: cur === index ? selectedColor : color,
                        }"
                    >
                        {{ item.text }}
                    </p>
                </div>
            </div>
        </div>

        <div class="preview-edit">
            <div class="preview-edit__head">
                <div class="preview-edit__head-one flexs">
                    <p>底部导航</p>
                </div>
                <div class="preview-edit__head-dec">
                    方便用户在小程序页面中快速切换，精准定位您想要显示的页面，每一次修改都须重新提交审核发布才能及时更新。
                </div>
            </div>
            <div class="hot-box">
                <div class="preview-color__box">
                    <p
                        class="hot-item__title"
                        style="display: flex; align-items: center"
                    >
                        全局配置<el-popover
                            placement="right-start"
                            :width="200"
                            :persistent="false"
                            trigger="hover"
                            content="可自定义修改小程序底部导航菜单，修改好后必须重新审核发布才能生效"
                        >
                            <template #reference>
                                <el-icon color="#C1C1C1" :size="18">
                                    <QuestionFilled />
                                </el-icon>
                            </template>
                        </el-popover>
                    </p>
                    <div class="preview-color flexs">
                        <p class="preview-color__text">未选中文字颜色</p>
                        <el-color-picker
                            v-model="color"
                            @change="changeColor"
                        />
                    </div>
                    <div class="preview-color flexs">
                        <p class="preview-color__text">选中时文字颜色</p>
                        <el-color-picker
                            v-model="selectedColor"
                            @change="changeSelectedColor"
                        />
                    </div>
                </div>
                <div class="hot-item">
                    <p class="hot-item__title">导航配置</p>
                    <div class="hot-item__subtitle">
                        <p>可拖动排序</p>
                        <p>最多配置 <span>4</span> 个导航菜单</p>
                        <p>
                            <strong>首页 / 查件 / 消息 / 我的</strong
                            >菜单不支持删除
                        </p>
                    </div>
                    <!-- 导航 -->
                    <div class="better-list">
                        <draggable
                            v-model="navs"
                            item-key="item"
                            animation="200"
                            :move="checkMove"
                        >
                            <template #item="{ element, index }">
                                <div class="better-item">
                                    <div class="better-item__one flexs">
                                        <p class="better-item__left">
                                            导航名称
                                        </p>
                                        <div class="better-item__right">
                                            <el-input
                                                v-model="element.text"
                                                maxlength="4"
                                                clearable
                                                placeholder="输入导航名称，最多4个字"
                                            />
                                        </div>
                                    </div>
                                    <!-- <div class="better-item__one flexs">
										<p class="better-item__left">跳转链接</p>
										<div class="better-item__right">
											<p class="better-item__home" v-if="element.id && !element.type">
												{{ element.urlText }}
												<el-tooltip :persistent="false" content="不支持修改链接" placement="top">
													<el-icon color="#9c9c9c" size="16px">
														<QuestionFilled />
													</el-icon>
												</el-tooltip>
											</p>
											<p class="better-link__text" @click.stop="clickLink(element, index)"
												v-if="!element.urlText && !element.pagePath">
												选择链接页面<el-icon>
													<ArrowDown />
												</el-icon>
											</p>
											<div class="better-link__active flexs"
												v-if="element.urlText != '' && element.type">
												<div class="better-link__active-info flexs">
													<p class="better-link__active-name line-one">{{ element.urlText }}
													</p>
													<el-icon @click.stop="clearLink(element, index)">
														<CloseBold />
													</el-icon>
												</div>
												<p class="better-link__text" @click.stop="clickLink(element, index)">
													修改<el-icon>
														<ArrowDown />
													</el-icon>
												</p>
											</div>
										</div>
									</div> -->
                                    <div
                                        class="better-item__one flexs"
                                        style="align-items: flex-start"
                                    >
                                        <p class="better-item__left">
                                            导航图标
                                        </p>
                                        <div
                                            class="better-item__right better-img-box"
                                        >
                                            <el-upload
                                                ref="uploadRef"
                                                class="better-img"
                                                multiple
                                                :action="actionImgUrl()"
                                                :http-request="uploadImg"
                                                :on-remove="handleRemove"
                                                :before-upload="
                                                    beforeAvatarUpload
                                                "
                                                :on-change="fileChange"
                                                :on-preview="handlePreview"
                                            >
                                                <div
                                                    class="better-img"
                                                    @click="
                                                        clickImg(
                                                            element,
                                                            index,
                                                            1
                                                        )
                                                    "
                                                >
                                                    <el-image
                                                        :src="
                                                            element.iconPath ||
                                                            img_nones
                                                        "
                                                        fit="cover"
                                                    />
                                                    <span
                                                        class="better-img__tip"
                                                        >更换</span
                                                    >
                                                </div>
                                            </el-upload>

                                            <el-upload
                                                ref="uploadRef"
                                                multiple
                                                class="better-img"
                                                :action="actionImgUrl()"
                                                :http-request="uploadImg"
                                                :on-remove="handleRemove"
                                                :before-upload="
                                                    beforeAvatarUpload
                                                "
                                                :on-change="fileChange"
                                                :on-preview="handlePreview"
                                            >
                                                <div
                                                    class="better-img"
                                                    @click="
                                                        clickImg(
                                                            element,
                                                            index,
                                                            2
                                                        )
                                                    "
                                                >
                                                    <el-image
                                                        :src="
                                                            element.selectedIconPath ||
                                                            img_nones
                                                        "
                                                        fit="cover"
                                                    />
                                                    <span
                                                        class="better-img__tip"
                                                        >更换</span
                                                    >
                                                </div>
                                            </el-upload>
                                        </div>
                                    </div>
                                    <!-- <div class="better-item__one flexs" style="align-items: flex-start">
										<p class="better-item__left">导航图标</p>
										<div class="better-item__right better-img-box">
											<div class="better-img" @click.stop="clickImg(element, index, 1)">
												<el-image :src="element.iconPath || img_nones" fit="cover" />
												<span class="better-img__tip">更换</span>
											</div>
											<div class="better-img" @click.stop="clickImg(element, index, 2)">
												<el-image :src="element.selectedIconPath || img_nones" fit="cover" />
												<span class="better-img__tip">更换</span>
											</div>
										</div>
									</div> -->
                                    <div
                                        class="item-delete"
                                        @click="deleteNav(index)"
                                        v-if="element.type"
                                    >
                                        <el-icon color="#bbb" size="20px">
                                            <CircleCloseFilled />
                                        </el-icon>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="foot-btn-old flexs-center">
        <el-button
            type="primary"
            size="large"
            :loading="btn_loading"
            @click="handleConfirm"
            >保存</el-button
        >
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue";
import {
    CircleCloseFilled,
    QuestionFilled,
    CloseBold,
    ArrowDown,
    Plus,
} from "@element-plus/icons-vue";
import CellTip from "@components/cell-tip.vue";
import draggable from "vuedraggable";
import UploadImg from "@/mixins/upload-img";
import { IMG_URL } from "@/assets/common/config";
const { proxy } = getCurrentInstance();

const uploadRef = ref(null);
const {
    succList,
    imgLoading,
    handlePreview,
    actionImgUrl,
    // uploadImg,
    handleRemove,
    beforeAvatarUpload,
    fileChange,
    imgVisible,
    dialogImageUrl,
    fileList,
} = UploadImg();

onMounted(() => {
    getDetail();
});

const sid = ref("");
//查询
const getDetail = () => {
    proxy.$axios.get("/decorates/navigation").then((res) => {
        if (res.data.code == 200) {
            sid.value = res.data.data.sid;
            getInfo(res.data.data.sid);
        } else {
            proxy.$message({
                message: res.data.msg,
                type: "error",
            });
        }
    });
};

function getInfo(id) {
    console.log("id", id);
    proxy.$axios.get("/decorates/" + id + "/content").then((res) => {
        if (res.data.code == 200) {
            var result = res.data.data;
            if (result.style.navs) {
                navs.value = result.style.navs;
                color.value = result.style.color;
                selectedColor.value = result.style.selectedColor;
            }
        } else {
            proxy.$message({
                message: res.data.msg,
                type: "error",
            });
        }
    });
}

// 保存
const btn_loading = ref(false);
const handleConfirm = () => {
    let objs = {
        color: color.value,
        selectedColor: selectedColor.value,
        navs: navs.value,
    };
    btn_loading.value = true;
    if (sid.value) {
        //编辑
        proxy.$axios
            .put("/decorates/" + sid.value, {
                content: JSON.stringify(objs),
                title: "导航管理",
                type: 1,
            })
            .then((res) => {
                btn_loading.value = false;
                if (res.data.code == 200) {
                    proxy.$message({
                        message: "保存成功！",
                        type: "success",
                    });
                } else {
                    proxy.$message({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            })
            .catch((err) => {
                btn_loading.value = false;
            });
    } else {
        proxy.$axios
            .post("/decorates", {
                content: JSON.stringify(objs),
                title: "导航管理",
                type: 1,
            })
            .then((res) => {
                btn_loading.value = false;
                if (res.data.code == 200) {
                    proxy.$message({
                        message: "保存成功！",
                        type: "success",
                    });
                } else {
                    proxy.$message({
                        message: res.data.msg,
                        type: "error",
                    });
                }
            })
            .catch((err) => {
                btn_loading.value = false;
            });
    }
};

/**
 * 导航栏
 */
const cur = ref(0);
const navs = ref([
    {
        pagePath: "pages/tabbar/home/index",
        text: "首页",
        iconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab1.png",
        selectedIconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab-act1.png",
    },
    {
        pagePath: "pages/tabbar/order/index",
        text: "查件",
        iconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab2.png",
        selectedIconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab-act2.png",
    },
    {
        pagePath: "pages/tabbar/info/index",
        text: "消息",
        iconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab3.png",
        selectedIconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab-act3.png",
    },
    {
        pagePath: "pages/tabbar/personal/index",
        text: "我的",
        iconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab4.png",
        selectedIconPath:
            "https://testenttp.huashutong.com/api/v1/resources/public/tab-act4.png",
    },
]);

// 修改导航文字颜色
const color = ref("#303A5A");
const selectedColor = ref("#026DED");
const changeColor = (val) => {
    navs.value.map((item) => {
        item.color = val ? val : "#303A5A";
    });
};
const changeSelectedColor = (val) => {
    navs.value.map((item) => {
        item.selectedColor = val ? val : "#026DED";
    });
};

// 控制首页不能拖动，且不能移动顺序
const checkMove = (evt) => {
    if (evt.relatedContext.element.pagePath === "pages/tabbar/home/index")
        return false;
    if (evt.draggedContext.element.pagePath === "pages/tabbar/home/index")
        return false;
    if (evt.relatedContext.element.pagePath === "pages/tabbar/personal/index")
        return false;
    if (evt.draggedContext.element.pagePath === "pages/tabbar/personal/index")
        return false;
    return true;
};

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {Number} arr_index 数组索引
 * @param {Number} arr_type 1是未选中图片，2是选中图片
 * @param {Object} arr_item 数据项
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false);
const arr_index = ref("");
const arr_type = ref("");
const arr_item = ref({});
const clickImg = (item, index, type) => {
    arr_item.value = item;
    arr_type.value = type;
    arr_index.value = index;
    showImg.value = true;
};

// 上传-单张的上传
function uploadImg(e) {
    imgLoading.value = true;
    let data = new FormData();
    data.append("file", e.file);
    proxy.$axios
        .post("resources/public", data)
        .then((res) => {
            fileList.value = [];
            imgLoading.value = false;
            if (res.data.code == 200) {
                if (arr_type.value == 1) {
                    arr_item.value.iconPath = IMG_URL + res.data.data.url;
                } else {
                    arr_item.value.selectedIconPath =
                        IMG_URL + res.data.data.url;
                }
            } else {
                proxy.$message({
                    message: res.data.msg,
                    type: "error",
                });
            }
        })
        .catch((err) => {
            imgLoading.value = false;
        });
}
</script>

<style lang="less" scoped>
.shop-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    height: calc(100vh - 120px);
}

.shop-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #fff;
    margin-right: @margin-sm;
    position: relative;
    flex-direction: column;
    // height: calc(100vh - 120px);
    padding: @padding-mdl;
    padding-bottom: 70px;
}

.tip-line {
    flex: none;
    width: 100%;
}

.preview-head {
    background: url("/src/assets/images/bg.png") no-repeat center;

    background-size: cover;
    width: 375px;
    height: 85px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    position: relative;

    .preview-head__text {
        width: 180px;
        margin: 0 auto;
        text-align: center;
        padding-top: 51px;
        font-size: 16px;
        font-weight: bold;
    }
}

.preview-body {
    position: relative;
    width: 375px;
    overflow: visible;
    background-color: #f9f9f9;
    box-shadow: 0px 0px 4px 0 rgb(0 0 0 / 10%);
    min-height: 480px;
}

.preview-foot {
    min-height: 1px;
    text-align: center;
    background-color: #fff;
    width: 375px;
    box-shadow: 0px -2px 8px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    height: 50px;

    .nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;

        .el-image {
            width: 28px;
            height: 28px;
        }

        .nav-text {
            margin-top: 2px;
            font-size: @font-size-sm;
        }
    }
}

.preview-edit {
    flex: none;
    width: 376px;
    height: calc(100vh - 120px);
    background-color: #fff;
    overflow-y: auto;

    /*滚动条整体样式*/
    &::-webkit-scrollbar {
        /*高宽分别对应横竖滚动条的尺寸*/
        width: 4px;
        height: 1px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: @gray-4;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #f1f1f1;
    }

    .preview-edit__head {
        border-bottom: 1px solid #f2f4f6;
        padding: @padding-lg @padding-md;

        .preview-edit__head-one {
            font-size: 18px;
            font-weight: bold;
            color: @gray-8;
        }

        .preview-edit__head-dec {
            font-size: @font-size-md;
            color: @gray-6;
            margin-top: @margin-sm;
        }
    }
}

.hot-box {
    padding: @padding-md @padding-md @padding-xl;

    .hot-item {
        padding: @padding-sm;
        border-bottom: 1px solid @gray-3;
        background-color: @gray-1;

        &:last-child {
            border: 0;
        }

        .hot-item__title {
            font-size: @font-size-md;
            color: @gray-8;
            margin-bottom: @margin-xs;
        }

        .hot-item__subtitle {
            font-size: @font-size-md;
            color: @gray-6;
            line-height: @line-height-md;
            margin-bottom: @margin-sm;

            strong {
                padding-right: 2px;
            }

            span {
                color: @themes;
                font-weight: bold;
            }
        }
    }

    .better-list {
        margin-top: @margin-sm;
        border-radius: @radius-xs;

        &:first-child {
            margin-top: 0;
        }

        .better-item {
            box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
            padding: @padding-sm @padding-md @padding-md;
            margin-bottom: @margin-sm;
            position: relative;
            background-color: #fff;

            .better-img-box {
                display: flex;
            }

            .better-img {
                flex: none;
                margin-right: 10px;
                position: relative;
                width: 50px;
                height: 50px;
                text-align: center;
                background-color: @gray-2;
                border: 1px solid #e5e5e5;
                cursor: pointer;
                overflow: hidden;

                .better-img__tip {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    font-size: @font-size-sm;
                    color: #fff;
                    background: rgba(0, 0, 0, 0.5);
                    text-align: center;
                }
            }

            .better-item__one {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;

                .better-item__left {
                    flex: none;
                    margin-right: @margin-mdl;
                }

                .better-item__right {
                    flex: 1;

                    .better-item__home {
                        color: @gray-8;
                        display: flex;
                        align-items: center;

                        .el-icon {
                            cursor: pointer;
                            margin-left: @margin-base;
                        }
                    }
                }
            }

            .item-delete {
                position: absolute;
                cursor: pointer;
                top: -8px;
                right: -8px;
                z-index: 4;
            }
        }
    }

    .hot-item__add {
        cursor: pointer;
        margin-top: @margin-sm;
        border-radius: @radius-xs;
        border: 1px solid @themes;
        background-color: #fff;
        color: @themes;
        font-size: @font-size-md;
        padding: @padding-xs @padding-md;
    }
}
</style>
